<template>
  <div>
    <h2>会员权益增加</h2>
    <table>
      <tbody>
        <tr>
          <td>名称</td>
          <td>
            <input type="text" v-model="state.qname" />
          </td>
        </tr>
        <tr>
          <td>照片</td>
          <td>
            <input type="file" @change="change" />
            <img
              v-if="src != ''"
              :src="'https://localhost:7299' + src"
              alt=""
              width="70"
              height="70"
            />
          </td>
        </tr>
        <tr>
          <td></td>
          <td>
            <input type="button" value="增加权益" @click="add" />
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
import axios from "axios";
import { reactive, toRefs, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();

let data = reactive({
  state: {
    qname: "",
    qphoto: "",
  },
  src: "",
});

let { state, src } = toRefs(data);

const change = (e: any) => {
  let obj = e.target.files[0];
  let formData = new FormData();
  formData.append("file", obj);

  axios({
    url: "/api/Photo/Photo",
    method: "post",
    data: formData,
  })
    .then((res) => {
      if ((res.data.code = 1001)) {
        src.value = res.data.data;
        state.value.qphoto = res.data.data;
      }
    })
    .catch((err) => {
      console.log(err);
    });
};

const add = () => {
  if (state.value.qname == "") {
    alert("名称不能为空");
    return;
  }
  if (state.value.qphoto == "") {
    alert("照片不能为空");
    return;
  }
  
  
  let obj = {
    qname: state.value.qname,
    qphoto: state.value.qphoto,
  };
  axios({
    url: "/api/quany/AddQ",
    method: "post",
    data: obj,
  })
    .then((res) => {
      console.log(res);
      if (res.data.data == 1) {
        alert("添加成功");
        router.push("/QShow");
      } else if (res.data.data == -1) {
        alert("名称重复");
        return;
      } else {
        alert("添加失败");
        return;
      }
    })
    .catch((err) => {
      console.log(err);
    });
};
</script>

<style scoped>
</style>